@import '../../bourbon/bourbon';
@import './reset.css';

$sprites:"../images/sprites";
$slotbg:"../images/slot-bg";
body {
  font-family:'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB', STHeiti, sans-serif;
  background:#fff url("../images/pixel_weave.png") repeat;
  color:#808080;
  a {
    color:#808080;
  }
}
.slot {
  width:100%;
  background-color:#eee;
  height:360px;
  @include position(relative);
  background:url("../images/slot-bg.jpg") no-repeat center;
  .slotbox {
    width:718px;
    height:198px;
    @include position(absolute, 50% 0 0 50%);
    margin-left:-(718px/2);
    margin-top:-(198px/2);
  }
  .slotmachine {
    width:718px;
    height:198px;
    @include position(absolute);
    z-index:2;
    @include retina-image($slotbg, 960px);
    background-repeat:no-repeat;
    background-position:0 0;
  }
  .letters {
    width:500px;
    padding:10px;
    @include clearfix;
    @include position(absolute, 29px 0 0 29px);
    z-index:1;
    .letter {
      @include size(100px 100px);
      margin:10px;
      float:left;
      overflow:hidden;
      @include retina-image($sprites, 203px);
      background-repeat:repeat-y;
      background-position:0 -300px;
    }
  }
  .trigger {
    @include position(absolute, 40px 40px 0 0);
    z-index:2;
    cursor:pointer;
    @include size(116px 116px);
    @include retina-image($slotbg, 960px);
    background-repeat:no-repeat;
    background-position:-723px 0;
  }
}
.header {
  width:100%;
  height:90px;
  background-color:#fff;
  .headerbar {
    width:860px;
    height:90px;
    margin:auto;
    .logo {
      width:98px;
      height:62px;
      padding-top:14px;
      @include clearfix;
      float:left;
      .osllogo {
        width:98px;
        height:62px;
        display:block;
        @include retina-image($sprites, 203px);
        background-repeat:no-repeat;
        background-position:-105px 0;
      }
    }
    .userdis {
      float:right;
    }
  }
}
.layout {
  width:860px;
  height:auto;
  margin:auto;

  .main {
    width:860px;
    height:auto;
    box-shadow:0 0 8px #aaa;
    .layer {
      width:860px;
      background:#fff url("../images/paper_fibers.png") repeat;
      .navbar {
        height:46px;
        background-color:#fffcfd;
        border-top:1px solid #e4e4e6;
        border-bottom:1px solid #e4e4e6;
        p.actititle {
          line-height:1.6em;
          font-size:14px;
          padding-left:30px;
          margin-left:18px;
          margin-top:12px;
          width:80px;
        }
      }
      .box {
        @include clearfix;
      }
    }
    .layer:last-child {
      border-radius:0 0 8px 8px;
    }
    .activitygift {
      .navbar p.actititle {
        @include retina-image($sprites, 203px);
        background-repeat:no-repeat;
        background-position:-105px -151px;
      }
      .box {
        height:auto;
        .gifts {
          padding:40px 40px 50px;
          @include clearfix;
          .giftlist {
            float:left;
            width:230px;
            height:auto;
            padding:9px;
            border:1px solid #dfe2e2;
            border-radius:4px;
            background-color:#fff;
            min-height:255px;
            img {
              width:230px;
              height:160px;
            }
            span {
              font-size:14px;
              line-height:1.6em;
              display:inline-block;
              margin-top:5px;
              b {
                color:#90c0fc;
              }
            }
          }
        }
      }
    }
    .activityrule {
      .navbar p.actititle {
        @include retina-image($sprites, 203px);
        background-repeat:no-repeat;
        background-position:-105px -176px;
      }
      .box {
        height:auto;
        .rulebox {
          @include clearfix;
          padding:30px 40px;
          .rulelist {
            float:left;
            @include size(300px auto);
            ol li {
              list-style:decimal inside;
              font-size:14px;
              line-height:3em;
            }
          }
          .ruleform {
            float:left;
            @include size(472px auto);
            form {
              div {
                margin:8px auto;
              }
              .txtinput {
                font-size:14px;
                line-height:1.6em;
                width:215px;
                padding:2px;
              }
              .txtinput:first-child {
                margin-right:20px;
              }
              label {
                font-size:14px;
              }
              .textarea {
                width:470px;
                height:90px;
                border:1px solid #ccc;
                box-shadow:inset 0 0 3px #ccc;
                padding:3px;
              }
              .btsubmit {
                @include button(#63b8f9);
                float:right;
                font-size:12px;
                letter-spacing:4px;
              }
            }
          }
        }
      }
    }
    .activityflat {
      .navbar p.actititle {
        @include retina-image($sprites, 203px);
        background-repeat:no-repeat;
        background-position:-105px -201px;
      }
      .box {
        .flats {
          width: 780px;
          height:auto;
          margin:auto;
          margin-top:5px;
          margin-bottom:40px;
          @include clearfix;

          a.flatlist {
            display:block;
            width:220px;
            height:160px;
            border:1px solid #e4e4e6;
            float:left;
            margin-top:30px;
            padding:9px;
            text-decoration:none;
            background-color:#fff;
            span.flatloc {
              @include retina-image($sprites, 203px);
              background-repeat:no-repeat;
              background-position:-105px -226px;
              font-size:14px;
              line-height:1.6em;
              padding-left:15px;
            }
            &:hover {
              box-shadow:0 0 4px #ccc;
            }
          }
        }
      }
    }
  }
  .footer {
    @include size(860px auto);
    margin-top:8px;
    height:30px;
    font-size:14px;
    line-height:1.8em;
    @include clearfix;
    p.aboutlinks {
      a {
        float:left;
        display:block;
        @include size(25px 25px);
        margin-left:15px;
      }
    }
    p.aboutlinks .sina {
      @include retina-image($sprites, 203px);
      background-repeat:no-repeat;
      background-position:-105px -245px;
    }
    p.aboutlinks .renren {
      @include retina-image($sprites, 203px);
      background-repeat:no-repeat;
      background-position:-105px -272px;
    }
    p.aboutlinks .facebook {
      @include retina-image($sprites, 203px);
      background-repeat:no-repeat;
      background-position:-105px -299px;
    }
    p.aboutlinks .twitter {
      @include retina-image($sprites, 203px);
      background-repeat:no-repeat;
      background-position:-105px -326px;
    }
  }

}

.marleft30 {
  margin-left:30px;
}
.marleft15 {
  margin-left:15px;
}
.marleft5 {
  margin-left:5px;
}
.marright5 {
  margin-right:5px;
}
.nobordertop {
  border-top:0;
}
.undis {
  display:none;
}
.left {
  float:left;
}
.right {
  float:right;
}

#usertips {
  background-color:#f1f2f4;
  .tipstop {
    text-align:center; height:120px; border-bottom:1px solid #d1d1d1;
    padding:30px;
  }
  .tipsbot {
    padding:0 15px;
    a {
      display: inline-block;
      width: 141px;
      border: 1px solid #cbcbcb;
      margin: 13px 10px;
      height:32px;
      line-height:32px;
      text-decoration:none;
      border-radius:2px;
      padding-left:15px;
    }
    span {
      width:25px;
      height:20px;
      display:inline-block;
      @include position(relative, 4px 5px 0 0);
    }
    .phone {
      @include retina-image($sprites, 203px);
      background-repeat:no-repeat;
      background-position:-100px -65px;
    }
    .qq {
      @include retina-image($sprites, 203px);
      background-repeat:no-repeat;
      background-position:-100px -86px;
    }
  }
}
#login {
  .loginhead {
    height:150px;
    border-bottom:1px solid #ccc;
    @include clearfix;
    .logo {
      width:98px;
      height:62px;
      padding-top:35px;
      margin:auto;
      .osllogo {
        width:98px;
        height:62px;
        display:block;
        @include retina-image($sprites, 203px);
        background-repeat:no-repeat;
        background-position:-105px 0;
      }
    }
    .tab {
      width:118px;
      height:28px;
      border:1px solid #ccc;
      @include position(relative, 24px 0 0 25px);
      float:left;
      border-radius:3px 3px 0 0;
      background-color:#ebeced;
      a {
        width:118px;
        height:28px;
        display:block;
        text-decoration:none;
        text-align:center;
        line-height:28px;
        font-size:12px;
      }
      &:hover {
        border-bottom:1px solid #f9f9f9;
        background-color:#f9f9f9;
      }
    }
  }
  .loginmain {
    .signin, .signup {
      width:180px;
      margin:auto;
      margin-top:30px;
      margin-bottom:20px;
    }
    form {
      div {
        margin:8px auto;
      }
      .txtinput {
        font-size:12px;
        line-height:1.6em;
        width:180px;
        padding:2px;
      }
      .btsubmit {
        @include button(#63b8f9);
        font-size:12px;
        letter-spacing:4px;
        width:150px;
        text-align:center;
        line-height:18px;
        height:18px;
      }
      .regtips {
        font-size:12px;
        float:right;
        a {
          color:#90c0fc;
        }
      }
      .readme > label {
        font-size:12px;
        a {
        color:#90c0fc;
        }
      }
    }
  }
}
